<template>
	<view class="errandDetails p20">
		<view class="orderMsg p20">
			<view class="msgTop dis">
				<view class="topL dis">
					<view class="topBG"></view>
					<view class="">订单信息</view>
				</view>
				<view class="topR" :class="item.class2">{{ item.orderStatusContent }}</view>
			</view>
			<view class="itemCon p20">
				<view class="conI dis">
					<view class="lable">待帮助人：</view>
					<view class="value dis">
						<view class="userImg">
							<image :src="item.senderAvatar" mode="aspectFill"></image>
						</view>
						<view class="name">{{ item.senderNickname }}</view>
					</view>
				</view>
				<view class="conI dis">
					<view class="lable">订单编号：</view>
					<view class="value dis">
						<view class="No">{{ item.id }}</view>
						<view class="copy" @click="copyId(item.id)">复制</view>
					</view>
				</view>
				<view class="conI dis">
					<view class="lable">类型：</view>
					<view class="value">
						<view class="orderType" :class="item.class1">{{ item.helpTypeContent }}</view>
					</view>
				</view>
				<view class="conI dis">
					<view class="lable">下单时间：</view>
					<view class="value">{{ item.createTime }}</view>
				</view>
				<view class="conI dis">
					<view class="lable">互助时间：</view>
					<view class="value">{{ item.mutualTime }}</view>
				</view>
				<view class="conI dis">
					<view class="lable">订单信息：</view>
					<view class="value">{{ item.orderContent }}</view>
				</view>
				<view class="conI dis" v-if="item.address1">
					<view class="lable">取货地址：</view>
					<view class="value">{{ item.address1 }}</view>
				</view>
				<view class="conI dis" v-if="item.address2">
					<view class="lable">收货地址：</view>
					<view class="value">{{ item.address2 }}</view>
				</view>
			</view>
		</view>
		<view class="orderMsg p20 orderInfo">
			<view class="msgTop dis">
				<view class="topL dis">
					<view class="topBG"></view>
					<view class="">订单详情</view>
				</view>
			</view>
			<view class="noOrder dis" v-if="isRecipient == 0 && isSender == 0 && isAdmin == 0">
				<view class="noIcon">
					<image src="/errand/static/errand1.png" mode=""></image>
				</view>
				<view class="noVal">接单后可查看信息</view>
			</view>
			<view class="itemCon p20" v-else>
				<view class="conI dis">
					<view class="lable">联系电话：</view>
					<view class="value dis">
						<view class="No">{{ item.contactPhone }}</view>
						<view class="copy" @click="copyId(item.contactPhone)">复制</view>
					</view>
				</view>
				<view class="conI dis">
					<view class="lable">隐私备注：</view>
					<view class="value">{{ item.privacyRemark || '-- 无 --' }}</view>
				</view>
				<view class="conIs dis">
					<view class="lable">订单图片：</view>
					<view class="values">
						<view class="imgList dis" v-if="item.imageUrls?.length">
							<view class="imgItem" v-for="ele in item.imageUrls">
								<image :src="ele" mode="aspectFill"></image>
							</view>
						</view>
						<view class="value" v-else>-- 无 --</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orderMsg p20" v-if="isSender == 1 || isAdmin == 1">
			<view class="msgTop dis">
				<view class="topL dis">
					<view class="topBGs"></view>
					<view class="">接单人信息</view>
				</view>
			</view>
			<view class="itemCon p20">
				<view class="conI dis">
					<view class="lable">昵称：</view>
					<view class="value">{{ item.recipientNickname }}</view>
				</view>
				<view class="conI dis">
					<view class="lable">手机号：</view>
					<view class="value dis">
						<view class="No">{{ item.recipientPhone }}</view>
						<view class="copy" @click="copyId(item.recipientPhone)">复制</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orderMsg p20" v-if="(item.orderStatus == -5 || item.orderStatus == -4) && (isSender == 1 || isRecipient == 1 || isAdmin == 1)">
			<view class="msgTop dis">
				<view class="topL dis">
					<view class="topBGs"></view>
					<view class="">订单异议</view>
				</view>
			</view>
			<view class="itemCon p20">
				<view class="conI dis">
					<view class="lable">异议描述：</view>
					<view class="value">{{ item.runErrandsOrderObjection?.objectionDescription }}</view>
				</view>
				<view class="conIs dis">
					<view class="lable">异议图片：</view>
					<view class="values">
						<view class="imgList dis" v-if="item.imageUrls?.length">
							<view class="imgItem" v-for="ele in item.runErrandsOrderObjection?.imageUrls">
								<image :src="ele" mode="aspectFill"></image>
							</view>
						</view>
						<view class="value" v-else>-- 无 --</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot dis">
			<view class="footL dis">
				<view class="price">佣金</view>
				<view class="priceVal">￥{{ item.recipientCommission }}</view>
			</view>
			<view class="footR" v-if="isAdmin == 1 || isSender == 1 || isRecipient == 1">
				<!-- 管理员操作区域 -->
				<view class="butList dis" v-if="isAdmin == 1">
					<!-- 订单冻结状态 -->
					<view class="butList dis" v-if="item.orderStatus == -4">
						<view class="butItem admin" @click="openAdminOptDialog">管理员管控</view>
						<view class="butItem order" @click="openAdminOptForFreezeOrderDialog">订单管理</view>
					</view>

					<!-- 订单被退回状态 -->
					<view class="butList dis" v-else-if="item.orderStatus == -3">
						<view class="butItem admin" @click="openAdminOptDialog">管理员管控</view>
					</view>

					<!-- 等待接单状态 -->
					<view class="butList dis" v-else-if="item.orderStatus == 0">
						<view class="butItem admin" @click="openAdminOptDialog">管理员管控</view>
						<view class="butItem order" @click="openAdminOptForOrder0Dialog">订单管理</view>
					</view>

					<!-- 进行中/待确认状态 -->
					<view class="butList dis" v-else-if="item.orderStatus == 1 || item.orderStatus == 2">
						<view class="butItem admin" @click="openAdminOptDialog">管理员管控</view>
						<view class="butItem order" @click="openAdminOptOrderDialog">订单管理</view>
					</view>

					<!-- 已完成状态 -->
					<view class="butList dis" v-else-if="item.orderStatus == 3">
						<view class="butItem admin" @click="openAdminOptDialog">管理员管控</view>
					</view>
				</view>

				<!-- 发单人操作区域 -->
				<view class="butList dis" v-else-if="isSender == 1">
					<!-- 等待接单状态 -->
					<view class="butList dis" v-if="item.orderStatus == 0">
						<view class="butItem errBut" @click="senderCancelOrder0">取消订单</view>
						<view class="butItem affirm" @click="senderModifyOrder">修改订单</view>
					</view>

					<!-- 进行中状态 -->
					<view class="butList dis" v-else-if="item.orderStatus == 1">
						<view class="butItem errBut" @click="openSenderCancelOrderDialog">取消订单</view>
						<view class="butItem affirm" @click="senderModifyOrder">修改订单</view>
					</view>

					<!-- 骑手已完成状态 -->
					<view class="butList dis" v-else-if="item.orderStatus == 2">
						<view class="butItem errBut" @click="senderRaiseObjection">提出异议</view>
						<view class="butItem affirm" @click="senderConfirmCompletion">确认完成</view>
					</view>
				</view>

				<!-- 接单人操作区域 -->
				<view class="butList dis" v-else-if="isRecipient == 1">
					<!-- 进行中状态 -->
					<view class="butList dis" v-if="item.orderStatus == 1">
						<view class="butItem errBut" @click="openRecipientCancelOrderDialog">取消订单</view>
						<view class="butItem affirm" @click="recipientConfirmCompletion">确认完成</view>
					</view>
				</view>
				<view class="order bigBut" v-else-if="(isSender == 1 || isRecipient == 1) && item.orderStatus == 3">订单已完成</view>
			</view>

			<!-- 普通用户操作区域 -->
			<view class="footR" v-else>
				<view class="affirm bigBut" v-if="item.orderStatus == 0" @click="receivingOrder">立即接单</view>
			</view>

			<!-- <view class="footR" v-if="isAdmin == 1 || isSender == 1 || isRecipient == 1">
				<view class="butList dis" v-if="isSender == 1 && (item.orderStatus == 1 || item.orderStatus == 2)">
					<view class="butItem errBut">取消订单</view>
					<view class="butItem affirm">确认订单完成</view>
				</view>
				<view class="butList dis" v-if="isAdmin == 1">
					<view class="butItem admin">管理员管控</view>
					<view class="butItem order">订单管理</view>
				</view>
				<view class="butOk bigBut" v-if="(isSender == 1 || isRecipient == 1) && item.orderStatus == 3">订单已完成</view>
			</view>
			<view class="footR" v-else>
				<view class="affirm bigBut" v-if="isSender == 0 && isRecipient == 0 && item.orderStatus == 0" @click="open(item.id)">抢单</view>
			</view> -->
		</view>
	</view>
	<up-modal title="提示" :show="showModal" contentTextAlign="center" confirmButtonShape="circle">
		<view class="slot_content">是否确认接单？</view>
		<template #confirmButton>
			<view class="modalBut dis">
				<view class="custom_btn nodeBut" @click="okDel">取消</view>
				<view class="custom_btn" @click="okAdd">确定</view>
			</view>
		</template>
	</up-modal>
	<!-- 接单人取消订单 -->
	<up-popup :show="cancelR" :round="10" mode="bottom" @close="closeCanR">
		<view class="cancel riskClass">
			<view class="repTit">取消订单</view>
			<view class="lable p20">选择原因方：</view>
			<view class="repRadio p20">
				<up-radio-group v-model="cancelPersonResponsible" placement="row">
					<up-radio label="我的原因" name="recipient"></up-radio>
					<up-radio label="发单人的原因" name="sender"></up-radio>
				</up-radio-group>
			</view>
			<view class="lable p20">具体取消原因：</view>
			<view class="reportVal p20">
				<textarea v-model="cancelReason" placeholder="请输入具体取消原因" />
			</view>
			<view class="errLable p20">注意：多次取消订单会降低完成率，完成率过低过多会被系统冻结，严禁引导用户私下交易。</view>
			<view class="reportBut dis p20">
				<view class="butR">确认取消</view>
			</view>
		</view>
	</up-popup>
	<!-- 发单人取消订单 -->
	<up-popup :show="cancelS" :round="10" mode="bottom" @close="closeCanS">
		<view class="cancel riskClass">
			<view class="repTit">取消订单</view>
			<view class="lable p20">选择原因方：</view>
			<view class="repRadio p20">
				<up-radio-group v-model="cancelPersonResponsibleS" placement="row">
					<up-radio label="我的原因" name="recipient"></up-radio>
					<up-radio label="发单人的原因" name="sender"></up-radio>
				</up-radio-group>
			</view>
			<view class="lable p20">具体取消原因：</view>
			<view class="reportVal p20">
				<textarea v-model="cancelReasonS" placeholder="请输入具体取消原因" />
			</view>
			<view class="reportBut dis p20">
				<view class="butR">确认取消</view>
			</view>
		</view>
	</up-popup>
	<!-- 发单人提出异议 -->
	<up-popup :show="dissent" :round="10" mode="bottom" @close="closeDissent">
		<view class="cancel riskClass">
			<view class="repTit">提出异议后由管理员进行处理</view>
			<view class="lable p20">异议描述：</view>
			<view class="reportVal p20">
				<textarea v-model="dissentVal" placeholder="请输入具体异议理由" />
			</view>
			<view class="imgList p20 dis">
				<!-- <view class="imgItem">
					<view class="offImg" @click.stop="delImg(item)">x</view>
				</view> -->
				<view class="imgItem itemAdd dis">
					<view class="upIcon">
						<image src="/pages/static/11.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="reportBut dis p20">
				<view class="butR">提价</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
import { getOrderInfo, receivingOrder } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
import { errandsItem } from '@/util/util.js';
const schoolInfo = ref({});
const errandId = ref(0);
onLoad((options) => {
	// console.log(options);
	errandId.value = options.id;
});
onShow(() => {
	// console.log('onShow');
	const schoolStr = uni.getStorageSync('schoolInfo');
	if (!schoolStr) {
		uni.navigateTo({
			url: '/pages/selectSchool/index?isIndex=1'
		});
	} else {
		const school = JSON.parse(schoolStr);
		schoolInfo.value = school;
		getData();
	}
});

// 接单人取消订单
const cancelR = ref(false);
const cancelPersonResponsible = ref('');
const cancelReason = ref('');
const closeCanR = () => {
	cancelR.value = false;
};

// 发单人取消订单
const cancelS = ref(false);
const cancelPersonResponsibleS = ref('');
const cancelReasonS = ref('');
const closeCanS = () => {
	cancelR.value = false;
};
// 发单人异议描述
const dissent = ref(false);
const dissentVal = ref('');
const closeDissent = () => {
	dissent.value = false;
};

// 抢单
const showModal = ref(false);
const value = ref(0);
const okDel = () => {
	value.value = 0;
	showModal.value = false;
};
const okAdd = async () => {
	uni.showLoading({
		title: '抢单中...'
	});
	const res = await receivingOrder(value.value);
	// console.log(res);
	if (res.code == 0) {
		uni.hideLoading();
		uni.showToast({
			title: '抢单成功',
			icon: 'none'
		});
		tabId.value = 3;
		okDel();
		getData();
	} else if (res.code == 1) {
		okDel();
		uni.navigateBack({
			delta: 1
		});
	} else {
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
	}
};
const open = (val) => {
	showModal.value = true;
	value.value = val;
};

const isAdmin = ref(0);
const isRecipient = ref(0);
const isSender = ref(0);
const item = ref({});
const getData = async () => {
	const res = await getOrderInfo(errandId.value);
	console.log(res);
	if (res.code == 0) {
		isAdmin.value = res.data.isAdmin;
		isRecipient.value = res.data.isRecipient;
		isSender.value = res.data.isSender;
		const newItem = errandsItem(res.data.order);
		console.log(newItem);
		item.value = newItem;
	}
};
const copyId = (id) => {
	uni.setClipboardData({
		data: id,
		success: () => {
			uni.showToast({
				title: '复制成功',
				icon: 'success'
			});
		},
		fail: () => {
			uni.showToast({
				title: '复制失败',
				icon: 'none'
			});
		}
	});
};
</script>

<style scoped lang="scss">
.errandDetails {
	position: relative;
	padding-bottom: 108rpx;
	z-index: 1;
	.orderMsg {
		margin-bottom: 20rpx;
		background: #ffffff;
		border-radius: 16rpx;
		.msgTop {
			justify-content: space-between;
			align-items: center;
			.topL {
				font-weight: bold;
				font-size: 28rpx;
				line-height: 30rpx;
				color: #000000;
				.topBG {
					margin-right: 10rpx;
					width: 6rpx;
					height: 30rpx;
					background: linear-gradient(180deg, #5381f6 0%, rgba(83, 129, 246, 0) 100%);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
				.topBGs {
					margin-right: 10rpx;
					width: 6rpx;
					height: 30rpx;
					background: linear-gradient(180deg, #ff9c50 0%, rgba(255, 156, 80, 0) 100%);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
			}
			.topR {
				font-weight: bold;
				font-size: 24rpx;
			}
			.state0 {
				color: #1b9aee;
			}
			.state1 {
				color: #f3742f;
			}
			.state2 {
				color: #75c550;
			}
			.state3 {
				color: #fdb321;
			}
			.state4 {
				color: #a8a8a8;
			}
		}
		.itemCon {
			.conI {
				align-items: center;
				margin-top: 20rpx;
				.lable {
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
				.value {
					align-items: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #222222;
					.userImg {
						margin-right: 15rpx;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #ccc;
						overflow: hidden;
					}
					.copy {
						margin-left: 15rpx;
						width: 72rpx;
						height: 42rpx;
						background: #f8f8f8;
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #999999;
						text-align: center;
						line-height: 42rpx;
					}
					.orderType {
						width: 80rpx;
						height: 42rpx;
						border-radius: 8rpx;
						font-weight: 500;
						font-size: 24rpx;
						text-align: center;
						line-height: 42rpx;
					}
					.tab1 {
						color: #4f77e0;
						background: #eef3ff;
					}
					.tab2 {
						background: #ffefed;
						color: #e0604f;
					}
					.tab3 {
						color: #00cc36;
						background: #e0f7e2;
					}
					.tab4 {
						color: #f39f4b;
						background: #fff6ed;
					}
				}
			}
		}
	}
	.orderInfo {
		.itemCon {
			.conIs {
				margin-top: 20rpx;
				.lable {
					width: 145rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
				.values {
					font-weight: 500;
					font-size: 24rpx;
					color: #222222;
					.imgList {
						flex-wrap: wrap;
						gap: 12rpx;
						.imgItem {
							width: 110rpx;
							height: 110rpx;
							border-radius: 15rpx;
							background-color: #ccc;
						}
					}
				}
			}
		}
		.noOrder {
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 320rpx;
			background: #ffffff;
			.noIcon {
				width: 72rpx;
				height: 72rpx;
			}
			.noVal {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
	.foot {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 108rpx;
		background: #ffffff;
		box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0, 0, 0, 0.05);
		z-index: 2;
		.footL {
			padding-left: 40rpx;
			.price {
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
			.priceVal {
				font-size: 24rpx;
				color: #e65e1f;
			}
		}
		.footR {
			.butList {
				justify-content: flex-end;
				align-items: center;
				.butItem {
					margin-left: 20rpx;
					width: 204rpx;
					height: 76rpx;
					border-radius: 52rpx;
					font-size: 24rpx;
					line-height: 76rpx;
					text-align: center;
				}
				.admin {
					background: #eef3ff;
					color: #000000;
				}
				.order {
					background: #fff3ee;
					color: #da612f;
				}
			}
			.bigBut {
				margin-right: 30rpx;
				width: 460rpx;
				height: 84rpx;
				border-radius: 16rpx;
				font-size: 24rpx;
				line-height: 84rpx;
				text-align: center;
				color: #ffffff;
			}
			.butOk {
				color: #ffffff;
				background: linear-gradient(45deg, #f6b323 0%, #f49339 100%);
			}
			.affirm {
				color: #ffffff;
				background: linear-gradient(45deg, #5384f7 0%, #5744e8 100%);
			}
			.errBut {
				color: #ffffff;
				background: linear-gradient(45deg, #fa6f6a, #fa2c19 100%);
			}
		}
	}
}
/* 取消订单 */
.cancel {
	width: 100%;
	.repTit {
		width: 100%;
		line-height: 80rpx;
		text-align: center;
	}
	.imgList {
		flex-wrap: wrap;
		gap: 20rpx;
		.imgItem {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
			background-color: #f7f8fa;
			overflow: hidden;
			.offImg {
				position: absolute;
				right: 0;
				top: 0;
				width: 40rpx;
				height: 40rpx;
				line-height: 30rpx;
				font-size: 26rpx;
				text-align: center;
				border-radius: 0rpx 10rpx 0rpx 40rpx;
				background: #000;
				color: #fff;
			}
		}
		.itemAdd {
			justify-content: center;
			align-items: center;
			.upIcon {
				width: 108rpx;
				height: 108rpx;
			}
		}
	}
	.reportVal {
		margin: auto;
		width: 90%;
		height: 150rpx;
		border-radius: 15rpx;
		background-color: #f3f3f3;
		textarea {
			width: 100%;
			height: 100%;
		}
	}
	.errLable {
		font-size: 26rpx;
		color: #fa2c19;
	}
	.reportBut {
		justify-content: flex-end;
		width: 100%;
		.butR {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			font-size: 26rpx;
			color: #fff;
			background-color: #1b9aee;
		}
	}
}
</style>
<style>
page {
	background: #f8f8fa;
}
image {
	width: 100%;
	height: 100%;
}
.modalBut {
	align-items: center;
	justify-content: space-around;
	width: 100%;
}
.custom_btn {
	width: 40%;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 35rpx;
	text-align: center;
	color: #fff;
	background-color: #3391e6;
}
.nodeBut {
	color: #515151;
	background-color: #f0f0f0;
}

.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.noData {
	width: 100%;
	color: #999;
	text-align: center;
}
</style>
